前言
在 Day 22 中，我們完成了床邊行動端的生命徵象輸入卡片。當護理師在病房巡視時逐筆輸入數據後，主治醫師、值班專科護理師或交接班團隊打開系統，最先關注的通常不是單點數字，而是宏觀的「體溫單（TPR Sheet, Temperature-Pulse-Respiration Sheet）」。

傳統紙本體溫單是一張印滿密集座標格子的三折報表。醫師查房時，會重點觀察以下三種臨床圖形特徵：

1.稽留熱（Sustained Fever）或弛張熱（Remittent Fever）： 體溫是否連續數天維持在 39°C 以上，還是早晚劇烈震盪？
2.體溫與脈搏分離（Faget Sign / 脈溫分離）： 正常人體溫上升 1°C，脈搏通常上升約 10 次/分。若病患體溫高達 40°C 但脈搏卻異常緩慢（如傷寒、退伍軍人病），就是關鍵的診斷線索。
3.多軸同圖對照： 體溫（紅線）、脈搏（藍點/藍線）在同一時間軸上的同步疊加。

今天我們將採用現代 Web 視覺化方案（基於 Chart.js 與 TypeScript），在前端實作一張具備臨床常規特徵的雙 Y 軸時序 TPR 圖表，支援臨床安全基準線、異常點高亮標記與時間槽對齊！

一、臨床體溫單（TPR Chart）的特殊規格要求
繪製消費級圖表（如股價走勢圖）與繪製醫療級體溫單有極大的認知差異：
二、前端資料模型與轉換
從後端（Day 16 的批次體徵 API 或 Day 21 的 Bundle）取回的數據通常是按時間排序的 Observation 列表。我們需要將其整理為圖表所需的時間序列資料。

建立 src/types/tpr-chart.types.ts：
三、Vue 3 + Chart.js 實作 TPR 組件
我們封裝一個可重複使用的前端組件 ClinicalTprSheet.vue。

此組件包含：
1.Chart.js 雙 Y 軸核心配置（左軸體溫、右軸心率）。
2.Chart.js Annotation 插件：繪製 38.5°C 警戒紅虛線。
3.客製化 Tooltip：懸浮時同時呈現當次體溫、心跳與血壓數值。

四、模擬臨床病歷資料串接範例
在父層頁面或病歷主面板中，我們載入過去 24 小時的量測點，並觀察「發燒高鋒」在 TPR 圖表上的呈現：

視覺化亮點呈現：
1.在 16:00 的刻度上，體溫紅線衝破 38.5°C 警戒線（達到 39.2°C），該點半徑自動放大為 6px，伴隨深紅色警示。
2.同一刻度右側藍色虛線脈搏同步飆升至 115 bpm，一眼即可辨識為典型的感染性心跳加速反應（Sinus Tachycardia）。
3.游標移動到 16:00 點位，Tooltip 自動跳出 血壓: 135/86 mmHg，完整重現護理站體溫單的臨床資訊厚度。

五、臨床圖表實作的三大陷阱防範
1.缺失值（Null/Undefined）中斷折線：若某個時間點（如半夜 04:00）僅量測了血壓與脈搏但未測量體溫，數值需填入 null。Chart.js 預設會斷開線條；若希望線條持續相連，可在 dataset 設定 spanGaps: true。
2.多重時間軸網格重疊混淆：雙 Y 軸若兩邊都開啟格線（Grid lines），畫面會被無數橫線切碎。務必在右軸（yHr）設定 grid: { drawOnChartArea: false }，僅保留左軸作為全圖水平對齊基準。
3.時間跨度縮放（Zoom & Pan）：若住院天數達 30 天，單一畫面塞入 120 個量測點將難以辨讀。可引入 chartjs-plugin-zoom 插件，支援護理人員以滑鼠滾輪或手勢自由縮放檢視最近 3 天或當班的細部波動。

小結
今天我們攻克了醫療視覺化中最具代表性的圖表模組：
1.掌握了臨床體溫單（TPR Sheet）的雙 Y 軸比例對稱原則與符號色彩慣例。
2.以 Chart.js + annotation 插件 實作了具備 38.5°C 警示紅線、異常點自動放大與血壓複合 Tooltip 的現代化圖表組件。
3.規範了醫療數據時序插值與格線衝突的工程防禦策略。

有了輸入卡片與視覺化趨勢圖後，明天 Day 24 我們將聚焦在行動給藥的關鍵物理互動：臨床給藥掃描模擬——條碼比對流程的前後端互動、硬體事件監聽與即時音效反饋！